/**
{
"style":{
"navigationBarTitleText":"保险申请",
"navigationStyle": "default"
}
}
*/

<template>
	<xi-list-tabs ref="$list" class="bg#fff" :tabs="conf.tabs" v-model="select.status" :query="on.query"
		:scrollable="false" :auto="true" lineColor="transparent" activeStyle="color:#333333;font-size:32rpx"
		inactiveStyle="color:#909397;font-size:30rpx">

		<template #default="{ data }">
			<div class="list">
				<view class="item" v-for="item in data" :key="item.id" @click="jumpDetail(item)">

					<view class="top">
						<view class="flex-lr-tbc">
							<view class="top-le">
								订单编号 <text>{{item.order_sn}}</text>
							</view>
							<!-- text1 -->
							<view :class="[item.status == 4? 'text1':'', 'top-ri']">
								{{statusBase[item.status]}}
							</view>
						</view>

						<view class="order-info display_flex mt26">
							<image class="flex-shrink" :src="getImage(item.sfz_image)" mode="aspectFill"></image>

							<view class="flex_1 pl30">

								<view class="info1">
									{{item.name}} {{item.mobile}}
								</view>

								<view class="info1">
									车辆：<text :class="item.car&&item.car.pin? '':'red-color'">{{item.car&&item.car.pin? item.car.pin: '车辆已被删除'}}</text>
								</view>

								<view class="info1">
									身份证号码：{{item.sfz}}
								</view>

								<view class="time">
									预约时间：{{item.createtime}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</div>
		</template>
	</xi-list-tabs>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'


	let conf = reactive({
		tabs: [{
				name: '全部',
				value: '',
				type: 1,
			},
			{
				name: '待处理',
				value: 1,
				type: 2,
			},
			{
				name: '待缴费',
				value: 2,
				type: 3,
			},
			{
				name: '待审核',
				value: 3,
				type: 4,
			},
			{
				name: '已支付',
				value: 4,
				type: 5,
			}
		],
		query: {},
	})

	const statusBase = {
		1: '待处理',
		2: '待缴费',
		3: '待审核',
		4: '已支付'
	}

	let select = Vue.reactive({
		status: '',
	})
	const $list = ref(null)
	let on = {
		async query(req) {

			let res = await $post("/user/insure_order", {
				...req,
				status: select.status
			})
			let obj = {
				data: res.list
			}
			return obj
		},
	}

	const jumpDetail = (item) => {
		uni.navigateTo({
			url: '/pages/mine/mine/bxsqDetail?id=' + item.id
		})
	}


	const getImage = (imgs) => {
		if (!imgs) return ''
		return imgs.split(',')[0]
	}

	Vue.onShow(() => {
		// nextTick(() => {
		// 	$list.value.reload()
		// })
	})
	Vue.onLoad(() => {})
</script>
<style scoped lang='scss'>
	.list {
		.item {
			margin-top: 20rpx;
			background-color: #fff;

			.top {
				padding: 32rpx 24rpx 22rpx;
			}

			.top-le {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7D7D7D;
				line-height: 32rpx;
				text-align: justified;

				text {
					color: #333333;
				}
			}

			.top-ri {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #E50004;

				&.text1 {
					color: #348B8A;
				}
			}

			.order-info {
				image {
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.title {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #292929;
					line-height: 44rpx;
					padding-top: 6rpx;
				}

				.time {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 44rpx;
					padding-top: 8rpx;
				}

				.price {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 32rpx;
					color: #E50004;
					line-height: 48rpx;
				}
			}

			.btns {
				padding: 22rpx 24rpx;
				border-top: 2rpx solid #eee;

				.btn {
					width: 162rpx;
					height: 62rpx;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 28rpx;
					text-align: center;
					line-height: 62rpx;
					margin-left: 14rpx;

					&.btn1 {
						background: #F7F7F7;
						color: #828282;
					}

					&.btn2 {
						background: #348B8A;
						color: #fff;
					}
				}
			}

		}
	}

	.info1 {
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 44rpx;
		margin-top: 2rpx;
	}
	.red-color {
		color: #E50004;
	}
</style>